<!--
* @description 验证
* @author zywu
* @date 2022/05/12 13:54:23
!-->
<template>
  <div class="device-verify" :class="{'is-verify':loading,'has-verify-img':hasVerifyImg}">
    <div class="e-nav-bar">
      <div class="e-nav-bar__title e-flex-y-center e-flex-between e-pt-10">
        <div class="e-f-24 e-bold">验证{{isDTU&&!isOnline?'失败':''}}</div>
        <div class="e-flex-y-center e-flex-between" :class="{'e-color-999':!loading}" @click="exit">
          <div class="e-mr-5">退出验证</div>
          <i class="iconfont icon-tuichu e-f-22"></i>
        </div>
      </div>
    </div>
    <div style="height:60px;"></div>

    <!-- 物联设备或DTU在线 -->
    <div v-show="!isDTU||isOnline" class="e-pl-30 e-pr-30 e-pb-20">
      <div class="e-f-20 e-color-333">{{typeObj.deviceCategoryName}}</div>
      <!-- DTU -->
      <div v-if="isDTU&&!isUT" class="e-mt-10 e-color-333">{{shortName}}在线，请触发一个点位故障（如拆下一个烟感）</div>
      <!-- 验证提示插图 -->
      <template v-if="hasVerifyImg&&typeObj.id">
        <div v-for="n in typeObj.verifyImgNum" :key="n">
          <van-image
            class="e-mt-30"
            width="100%"
            :src="`/ilink-app-h5-zd/static/addDevice/image/${typeObj.pid}-${typeObj.id}-verify-${n}.${typeObj.verifyImgExt||'png'}`"
          />
        </div>
      </template>
    </div>

    <!-- DTU离线 -->
    <div v-show="isDTU&&!isOnline" class="e-p-15">
      <div class="e-flex-column e-flex-center e-flex-items-center">
        <img class="device-verify-fail-icon" src="@/assets/img/addDevice/verify-fail.png" />
        <van-divider class="e-mt-30" style="width:100%;border-color:#E1E1E1;" />
      </div>
      <div class="e-mt-10 e-f-14">
        <div class="e-bold e-color-333 e-mt-20 text-center">{{shortName}}离线，请检查网络是否畅通</div>
      </div>
    </div>

    <div style="height:80px;"></div>

    <div v-if="hasVerifyImg" class="e-fixed-b e-bg-white e-flex-y-center e-flex-between e-p-15">
      <!-- 物联设备或DTU在线 -->
      <van-button
        v-if="!isDTU||isOnline"
        class="e-flex-grow van-button--theme"
        size="large"
        :disabled="loading"
        @click="confirm"
      >{{typeObj.verifyButtonText||'完成操作，进入下一步'}}</van-button>
      <!-- 物联设备或离线 -->
      <van-button v-else class="e-flex-grow van-button--theme" size="large" :disabled="loading" @click="getUitdOnlineInfo">重新验证</van-button>
    </div>

    <van-overlay :show="loading" :class-name="hasVerifyImg?'':'no-bg'" @click="loading = false">
      <div class="verifying e-flex-xy-center" @click.stop>
        <div class="e-flex-column e-flex-center e-flex-items-center">
          <van-loading size="80px" color="#899FFF" />
          <div class="e-mt-10 e-flex-y-center" :class="{'e-color-white':hasVerifyImg}">
            请等待
            <div class="text-center" style="min-width:30px;">{{timeout}}</div>秒
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {
  getNewUploadInfo,
  getUitdOnlineInfo,
  getUitdData,
  getSjUploadInfo,
} from '@/api/device'
import { shortNameMap } from '@/config/dict'
let dataInterval
let countInterval

export default {
  components: {},

  data() {
    return {
      loading: false,
      typeObj: {},
      timeout: 30,
      isDTU: false,
      isOnline: false,
      isUT: false,
    }
  },

  computed: {
    ...mapState(['userInfo']),
    hasVerifyImg() {
      return this.typeObj.verifyImgNum > 0
    },
    shortName() {
      return shortNameMap[this.typeObj.id]
    },
  },

  created() {
    this.typeObj = this.$route.params.typeObj || {}
    this.deviceNo = this.$route.params.deviceNo
    this.deviceName = this.$route.params.deviceName
    if (this.typeObj.pid == 110) {
      // DTU
      this.isDTU = true
      this.isUT = this.typeObj.id == 112 || this.typeObj.id == 113
      if (this.isUT) {
        this.isOnline = true
      } else {
        this.getUitdOnlineInfo()
      }
    } else if (!this.hasVerifyImg) {
      this.confirm()
    }
    this.useDTUApi =
      this.isDTU || this.typeObj.pid == 60 || this.typeObj.pid == 70
    this.useSJApi = this.typeObj.pid == 50 || this.typeObj.pid == 80
  },

  mounted() {},

  beforeDestroy() {
    this.clearDataInterval()
    countInterval && clearInterval(countInterval)
  },

  methods: {
    getUitdOnlineInfo() {
      getUitdOnlineInfo({
        deviceNo: this.deviceNo,
      }).then(({ data }) => {
        if (data && data.isOnline == 1) {
          this.isOnline = true
        } else {
          this.isOnline = false
          this.$toast('DTU离线')
        }
      })
    },
    setDataInterval() {
      this.clearDataInterval()
      dataInterval = setInterval(() => {
        this.request()
      }, 5000)
    },
    clearDataInterval() {
      dataInterval && clearInterval(dataInterval)
    },
    request() {
      let api
      let param
      if (this.useDTUApi) {
        api = getUitdData
        param = {
          deviceNo: this.deviceNo,
        }
      } else if (this.useSJApi) {
        api = getSjUploadInfo
        param = {
          fcfId: this.$route.params.id,
        }
      } else {
        api = getNewUploadInfo
        param = {
          account: this.userInfo.accountName,
          fcfId: this.$route.params.id,
        }
      }
      api(param)
        .then(({ data, status, info }) => {
          if (status == 200) {
            if (data) {
              data.name = data.name || this.deviceName
              this.next(true, data)
            } else {
              if (this.timeout <= 0) {
                this.next(false)
              }
            }
          } else {
            this.$toast(info)
            this.clearDataInterval()
            this.loading = false
          }
        })
        .catch((e) => {
          this.clearDataInterval()
          this.loading = false
        })
    },
    confirm() {
      this.loading = true
      this.request()
      this.setDataInterval()
      this.countDown()
    },
    countDown() {
      countInterval && clearInterval(countInterval)
      this.timeout = 30
      countInterval = setInterval(() => {
        this.timeout -= 1
        if (this.timeout <= 0) {
          clearInterval(countInterval)
          this.clearDataInterval()
        }
      }, 1000)
    },
    next(status, data) {
      this.$router.push({
        name: status ? 'VerifySuccess' : 'VerifyFail',
        params: {
          ...this.$route.params,
          deviceData: data,
          isDTU: this.isDTU,
          isOnline: this.isOnline,
        },
      })
    },
    exit() {
      this.$router.replace({
        name: 'AddDevice',
      })
    },
  },
}
</script>
<style lang='scss'>
.device-verify {
  .e-nav-bar {
    z-index: 1;
  }
  .verifying {
    height: 100%;
  }
  &.is-verify {
    .e-nav-bar {
      z-index: 2;
    }
    &.has-verify-img {
      .e-nav-bar {
        background: none;
        color: #fff;
      }
    }
  }

  &-fail-icon {
    width: 218px;
    height: 127px;
  }

  .van-overlay {
    &.no-bg {
      background: none;
    }
  }
  .van-loading__spinner--spinner i::before {
    width: 3px;
  }
}
</style>